<template>
  <div id="member" class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <el-input v-model="searchText" placeholder="用户昵称或手机号" style="width:300px"></el-input>
        <el-select v-model="searchOption" multiple collapse-tags  placeholder="请选择" style="margin:0 20px;" @change="OptionChange">
          <el-option
            v-for="item in searchOptions"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>

        <el-button type="primary" size="medium" @click="search">检索</el-button>
        <el-button type="primary" size="medium" @click="exportExcel">导出用户EXCEL</el-button>
      </el-col>
      <el-col class="action-bar screen">
        <el-checkbox label="在职证明" name="certification" v-model="showColumns.certification"></el-checkbox>
        <el-checkbox label="注册时间" name="createdAt" v-model="showColumns.createdAt"></el-checkbox>
        <el-checkbox label="付费套餐" name="menu" v-model="showColumns.menu"></el-checkbox>
      </el-col>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      :height="screenHeight"
      v-loading="tableLoadingShow"
      element-loading-text="拼命加载中"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="头像"
        width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            <img :src="scope.row.user_info.photo_url" alt=""
                 style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名/昵称"
        width="180">
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>{{scope.row.user_info.realname?scope.row.user_info.realname:scope.row.user_info.nickname}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="sex_name"
        width="80"
        label="性别">
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            <div v-show="scope.row.user_info.sex==0">保密</div>
            <div v-show="scope.row.user_info.sex==1">男</div>
            <div v-show="scope.row.user_info.sex==2">女</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="在职证明"
        v-if="showColumns.certification"
        width="180">
        <template slot-scope="scope" v-if="scope.row.user_info">
          <el-button type="primary" size="mini" @click="showCertification(scope.row.user_info.work_img_url)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="付费套餐"
        v-if="showColumns.menu"
        width="200"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            {{scope.row.user_info.vip_package_name==''?'无':scope.row.user_info.vip_package_name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="个人认证"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_personal_auth==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_personal_auth==0">否</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="status_name"
        label="单位认证"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_unit_auth==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_unit_auth==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="会员单位用户"
        show-overflow-tooltip
        width="120"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_member_unit==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_member_unit==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="专家"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_expert_auth==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_expert_auth==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="VIP"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_vip==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_vip==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="注册时间"
        v-if="showColumns.createdAt"
        width="200"
      >
      </el-table-column>
      <el-table-column label="操作" width='300'>
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="toCustomer_detail(scope.row.id)">查看详情</el-button>
          <el-button type="primary" size="mini" @click="showMenu_band(scope.row.id,scope.row.user_info.vip_package_name)">绑定套餐</el-button>
          <el-button type="danger" size="mini" @click="delUser(scope.row.id)">注销</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->

    <!-- 导出Excel列表   -->
    <el-table
      :data="ExcelData"
      style="width: 100%"
      id="out-table"
      v-show="false"
    >
      <el-table-column
        prop="name"
        label="姓名/昵称"
        width="180">
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>{{scope.row.user_info.realname?scope.row.user_info.realname:scope.row.user_info.nickname}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="sex_name"
        width="80"
        label="性别">
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            <div v-if="scope.row.user_info.sex==0">保密</div>
            <div v-if="scope.row.user_info.sex==1">男</div>
            <div v-if="scope.row.user_info.sex==2">女</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="付费套餐"
        width="200"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            {{scope.row.user_info.vip_package_name==''?'无':scope.row.user_info.vip_package_name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="个人认证"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_personal_auth==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_personal_auth==0">否</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="status_name"
        label="单位认证"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_unit_auth==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_unit_auth==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="会员单位用户"
        show-overflow-tooltip
        width="120"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_member_unit==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_member_unit==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="专家"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_expert_auth==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_expert_auth==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="VIP"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_vip==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_vip==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="注册时间"
        width="200"
      >
      </el-table-column>
    </el-table>
    <!-- 列表end  -->

    <!-- 在职证明弹窗 -->
    <el-dialog title="在职证明" :visible.sync="certificationVisible" @close="initData">
      <div align="center"><img :src="certificationPhoto" alt="" style="max-width:400px;margin:0 auto"></div>
    </el-dialog>
    <!-- 在职证明弹窗end -->

    <!-- 绑定套餐弹窗 -->
    <el-dialog title="绑定套餐" :visible.sync="menuBandVisible" @close="initData">
      <div>已绑定套餐</div>
      <el-select v-model="bindMenuOption" clearable placeholder="请选择" style="margin:20px 0">
        <el-option
          v-for="item in bindMenuOptions"
          :key="item.name"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <div>套餐数量</div>
      <el-input-number v-model="MenuOptionNum" :min="1" label="套餐数量" style="margin: 20px 0"></el-input-number>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindMenu">发布</el-button>
      </div>
    </el-dialog>
    <!-- 绑定套餐弹窗end -->


  </div>
</template>
<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  export default {
    name: 'member',
    data() {
      return {
        certificationVisible: false,//查看个性签名弹窗状态
        certificationPhoto: '',
        menuBandVisible: false,//绑定套餐
        searchText: '',
        personal_auth: 0,
        unit_auth: 0,
        member_unit_user: 0,
        vip_user: 0,
        expert: 0,
        userAuthId: '',//选中的用户id

        searchOption: '',//头部筛选的个人认证
        searchOptions: [],
        showColumns: {
          certification: false,//在职证明
          createdAt: false,//注册时间
          menu: false
        },

        bindMenuOption: '',
        bindMenuOptions: [],
        MenuOptionNum: 0,//套餐数量

        tableData: [{}],
        page: 1,
        totalPage: 0,
        ExcelData: [],
        tableLoadingShow: false,
        screenHeight: ''
      }
    },
    watch: {},
    methods: {
      async delUser(id){
        let judge = null;
        let tit = '是否注销该用户?';
        let _this = this;
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          let res = await this.$api.delUser({user_id: id});
          if (res.data.level == 'success') {
            _this.$message({
              type: 'success',
              message: res.data.message
            })
            _this.getUserList();
          } else {
            _this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        }
      },
      //导出excel
      async exportExcel(){
        var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '系统用户表.xlsx')
        }catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
      OptionChange(){
        console.log(this.searchOption)
        if (this.searchOption.indexOf("personal_auth")>-1){
          this.personal_auth = 1;
        }else{
          this.personal_auth = 0;
        }
        if (this.searchOption.indexOf("unit_auth")>-1){
          this.unit_auth = 1;
        }else {
          this.unit_auth = 0;
        }
        if (this.searchOption.indexOf("member_unit_user")>-1){
          this.member_unit_user = 1;
        }else {
          this.member_unit_user = 0;
        }
        if (this.searchOption.indexOf("vip_user")>-1){
          this.vip_user = 1;
        }else {
          this.vip_user = 0;
        }
        if (this.searchOption.indexOf("expert")>-1){
          this.expert = 1;
        }else {
          this.expert = 0;
        }
      },
      search() {
        this.tableLoadingShow = true;
        this.page = 1;
        this.getUserList()
      },
      async getVipPackageList(){
        const res = await this.$api.getVipPackageList();
        if (res.data.level == 'success'){
          this.bindMenuOptions = res.data.data
        }
      },
      async getUserAuthTypeFilterList(){
        //获取用户类型筛选列表
        let res = await this.$api.getUserAuthTypeFilterList();
        if (res.data.level == 'success'){
          this.searchOptions = res.data.data
        }
      },
      async getUserList() {
        //获取用户列表
        let params = {
          page: this.page,
          limit: 16,
          keyword: this.searchText,
          personal_auth: this.personal_auth,
          unit_auth: this.unit_auth,
          member_unit_user: this.member_unit_user,
          vip_user: this.vip_user,
          expert: this.expert
        }
        let res = await this.$api.getUserList(params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
          this.getUserListExcel(res.data.page_info.total)
        }
        this.tableLoadingShow = false;
      },
      async getUserListExcel(num) {
        //获取用户列表
        let params = {
          page: 1,
          limit: num
        }
        let res = await this.$api.getUserList(params);
        if (res.data.level == 'success') {
          this.ExcelData = res.data.data;
        }
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getUserList();
      },
      async bindMenu() {
        //绑定套餐
        let params = {
          user_id: this.userAuthId,
          vip_package_id: this.bindMenuOption,
          type: 'user',
          num: this.MenuOptionNum,
          unit_id: ''
        }
        const res = await this.$api.vipPackageBindUnit(params);
        if (res.data.level == 'success'){
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.menuBandVisible = false;
        }else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      },
      async bannedPost(id, flag) {
        let judge = null;
        let tit = '111';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        console.log(judge)
      },

      showCertification(url) {
        //显示在职证明
        this.certificationVisible = true;
        this.certificationPhoto = url;
      },
      showMenu_band(id,name) {
        //显示绑定弹窗
        this.userAuthId = id;
        for (let i = 0; i< this.bindMenuOptions.length; i++){
          if (this.bindMenuOptions[i].name == name) {
            this.bindMenuOption = this.bindMenuOptions[i].id;
          }
        }
        this.menuBandVisible = true;
      },
      toCustomer_detail(id) {
        this.$router.push({name: 'Customer_detail', query: {id: id}})
      },
      initData() {
        // this.certificationPhoto = '';
      }

    },
    created() {
      this.screenHeight =  document.documentElement.clientHeight || document.body.clientHeight
      if(this.screenHeight>0){
        this.screenHeight = this.screenHeight - 270
      }
    },
    mounted() {
      this.getUserList();
      this.getUserAuthTypeFilterList();
      this.getVipPackageList();
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }
</style>
